<template>
  <div v-loading="tableLoading" class="gl_contentBox gl_heightFull">
    <!-- 筛选项 -->
    <div class="demo-input-suffix gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :span="4">
          <p>培训名称</p>
          <el-input v-model="qo.Filter" placeholder="请输入名称" size="mini" clearable @change="getPageList()" />
        </el-col>
        <el-col :span="4">
          <p>培训类型</p>
          <el-select v-model="qo.TrainningTypeId" size="mini" placeholder="请选择培训类型" filterable @change="getPageList()">
            <el-option :value="null" label="全部" />
            <el-option v-for="item in trainningType" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <p>培训状态</p>
          <el-select v-model="qo.StatusCode" size="mini" placeholder="请选择培训状态" filterable @change="getPageList()">
            <el-option v-for="item in dictAll.trainningStatus" :key="item.code" :value="item.code" :label="item.value" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <p>报名时间</p>
          <el-date-picker
            v-model="filterTrainDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%;"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="mini"
            @change="handleTrainTimeChange"
          />
        </el-col>
        <el-col :span="6" align="left" class="search_btn">
          <!-- 查询按钮 -->
          <el-button type="primary" size="mini" @click="getPageList()">筛选</el-button>
          <!-- 重置按钮 -->
          <el-button type="warning" size="mini" @click="initForm()">{{ $t('button.Reset') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 培训视图 -->
    <el-row v-if="tableData.length" :gutter="15" class="game_view_list">
      <el-col v-for="(item, index) in tableData" :key="index" :span="8" :lg="{span: '4-8'}" class="gl_mb_15">
        <div class="game_view_item">
          <div class="game_title">
            <img class="game_coverimg" :src="getStaticPhotoUrl(item.logoUrl)" alt="" @error="errorPhoto">
            <div class="game_status">
              <!-- 审核状态 -->
              <el-tag v-if="item.approveStatusCode === 'NotApproved'" effect="plain" type="success" class="gl_mr_30">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <el-tag v-else-if="item.approveStatusCode === 'ApproveSuccess'" effect="plain" class="gl_mr_30">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <el-tag v-else effect="plain" class="gl_mr_30">{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</el-tag>
              <!-- 培训状态 -->
              <el-tag v-if="item.statusCode === 'Entry'" effect="dark" type="success">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <el-tag v-else-if="item.statusCode === 'Running'" effect="dark">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
              <el-tag v-else effect="dark">{{ item.trainningStatus && item.trainningStatus.name }}</el-tag>
            </div>
          </div>
          <div class="game_content">
            <div class="game_view_name gl_ellipsis">{{ item.name }}</div>
            <div class="game_view_type gl_mt_10">
              类型：{{ item.trainningType && item.trainningType.name }}
            </div>
            <div class="game_view_seq gl_mt_10">
              报名时间：{{ item.entryStartTime && item.entryStartTime.substring(0, 10) }} 到 {{ item.entryEndTime && item.entryEndTime.substring(0, 10) }}
            </div>
            <div class="game_view_seq gl_mt_10">
              培训时间：{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}
            </div>
          </div>
          <div class="hover_show_message">
            <div class="game_title">
              <div class="game_view_name gl_ellipsis">{{ item.name }}</div>
              <div class="game_view_seq gl_mt_10">
                <span class="label gl_mr_5">培训类型 </span>
                <span> {{ item.trainningType && item.trainningType.name }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">报名时间：</span>
                <span>{{ item.entryStartTime && item.entryStartTime.substring(0, 10) }} 到 {{ item.entryEndTime && item.entryEndTime.substring(0, 10) }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">培训时间：</span>
                <span>{{ item.startTime && item.startTime.substring(0, 10) }} 到 {{ item.endTime && item.endTime.substring(0, 10) }}</span>
              </div>
              <div class="game_view_play gl_mt_5">
                <span class="label">发布方：</span>
                <span>{{ item.organizationUnitDisplayName }}</span>
              </div>
            </div>
            <div class="game_contents">
              <el-row class="game_status">
                <el-col :span="12" class="tag_text_box">
                  <!-- 审核状态 -->
                  <span v-if="item.approveStatusCode === 'NotApproved'" class="tag_text gl_mr_10 gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <span v-else-if="item.approveStatusCode === 'ApproveSuccess'" class="tag_text gl_mr_10 gl_color_info">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                  <span v-else class="tag_text gl_mr_10">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningApproveStatus && item.trainningApproveStatus.name }}</span>
                </el-col>
                <el-col :span="12" class="tag_text_box">
                  <!-- 培训状态 -->
                  <span v-if="item.statusCode === 'Entry'" class="tag_text gl_color_info">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                  <span v-else-if="item.statusCode === 'Running'" class="tag_text gl_color_success">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                  <span v-else class="tag_text">
                    <i class="iconfont icon_state" style="vertical-align: middle;" />{{ item.trainningStatus && item.trainningStatus.name }}</span>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="game_status1">
                <el-col :span="12" class="gl_my_5 btn_box">
                  <el-button type="primary" size="small" @click="handleCommand('official', item)">培训官网</el-button>
                </el-col>
                <el-col :span="12" class="gl_my_5 btn_box">
                  <el-button type="primary" size="small" @click="handleCommand('data', item)">数据中心</el-button>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row v-else>
      <el-col :span="24" class="gl_noData_mockTable" style="line-height: 300px">
        <p>暂无数据</p>
      </el-col>
    </el-row>
    <el-row style="text-align: right;" class="gl_pb_15">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-size="qo.MaxResultCount"
        :current-page="qo.Page"
        @size-change="changePageSize"
        @current-change="changePage"
      />
    </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import defaultGameLogo from '@/assets/images/game/game_logoDefaultPhoto.png';
import { Api_GET_ClubBranchBranchTrainningsQO } from '@/lib/form/hall/swaggerForm';
import { api_GET_TrainTrainningType } from '@/extend/api/trainswaggerApi/app';
import { api_GET_ClubBranchBranchTrainnings } from '@/extend/api/hallswaggerApi/app';
// import auth from '@/lib/directives/auth';
export default {
  // directives: {
  //   auth
  // },
  data() {
    return {
      defaultGameLogo: defaultGameLogo,
      filterTrainDate: [],
      qo: new Api_GET_ClubBranchBranchTrainningsQO(),
      tableData: [],
      total: 0,
      tableLoading: false,
      trainningType: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      dictAll: state => state.dict.dictAll,
      tenantId: state => state.user.tenantId,
      currentUserType: state => state.user.currentUserType
    })
  },
  created() {
    this.getDict();
    this.initForm();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 初始化
    initForm() {
      this.qo = new Api_GET_ClubBranchBranchTrainningsQO();
      this.filterTrainDate = [];
      this.getTrainTrainningType();
      this.getPageList();
    },
    getTrainTrainningType() {
      api_GET_TrainTrainningType().then(res => {
        this.trainningType = res.items || [];
      }, () => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取培训列表
    getPageList(page) {
      this.qo.ApproveStatusCode = 'ApproveSuccess';
      this.qo.BranchId = this.$route.query.branchid;
      this.qo.IsPublished = true;
      this.qo.IncludeTrainningType = true;
      this.qo.IncludeTrainningStatus = true;
      this.qo.IncludeTrainningApproveStatus = true;
      this.qo.Page = page || 1;
      this.qo.SkipCount = (this.qo.Page - 1) * this.qo.MaxResultCount;
      this.tableLoading = true;
      api_GET_ClubBranchBranchTrainnings(this.qo).then(res => {
        this.tableLoading = false;
        this.tableData = res.items || [];
        this.total = res.totalCount;
      }, () => {
        this.tableLoading = false;
        this.$message({ type: 'error', message: '获取培训列表失败！' });
      });
    },
    // 处理时间筛选项
    handleTrainTimeChange(time) {
      this.qo.EntryStartTime = time && time[0];
      this.qo.EntryEndTime = time && time[1];
      this.getPageList();
    },
    // 点击更多
    handleCommand(code, gameInfo) {
      const that = this;
      if (code === 'data') {
        this.$router.push({
          name: 'CampusTrainData',
          params: { ...gameInfo, tenantId: 't__' + (gameInfo.tenantId || '') },
          query: { branchid: that.$route.query.branchid }
        });
      }
      if (code === 'official') {
        var a = document.createElement('a');
        var event = new MouseEvent('click');
        a.href = `${location.origin}/train.html#/home/${gameInfo.route + (this.tenantId ? '_' + this.tenantId : '')}/info`;
        a.target = '_blank';
        a.dispatchEvent(event);
      }
    },
    // 获取图片地址
    getStaticPhotoUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultGameLogo;
    },
    changePage(page) {
      this.getPageList(page);
    },
    changePageSize(pagesize) {
      this.qo.MaxResultCount = pagesize;
      this.getPageList();
    }
  }
};
</script>
<style scoped>
.change_game_icon {
  height: 28px;
  line-height: 32px;
}
.change_game_icon .icon_change {
  font-size: 18px;
  width: 24px;
  height: 24px;
  visibility: visible;
  color: #696b6c;
  cursor: pointer;
}
.change_game_icon .icon_change:hover {
  color: #1890ff;
}
.game_table_list .game_coverimg {
  max-width: 74px;
  max-height: 74px;
  border-radius: 50%;
  vertical-align: middle;
}
.dropdown_item {
  margin: 0 -20px;
  padding: 0 20px;
}
.game_view_list{
  padding: 0 2px;
}
.game_view_item {
  position: relative;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.10);
  overflow: hidden;
}
.game_view_item .game_top {
  position: absolute;
  width: 80px;
  height: 16px;
  top: 11px;
  right: 9px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  color: #fff;
}
.game_view_item .game_title {
  width: 100%;
  text-align: center;
  padding: 32px 0 0px;
  height: 210px;
  box-sizing: border-box;
}
.game_view_item .game_coverimg {
  max-width: 90px;
  max-height: 9 15px 0px;
  border-radius: 50%;
  margin: 0px 0 40px;
}
.game_view_item .game_content {
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  font-size: 14px;
  color: #828282;
  background: #e8f4ff;
}
.game_view_item .game_view_name {
  font-size: 16px;
  color: #000;
}
.game_view_item .hover_show_message {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}
.game_view_item:hover .hover_show_message {
  top: 0;
  background: rgba(0,0,0,0.58);
}
.hover_show_message .game_title {
    opacity: 0.9;
    font-size: 14px;
    height: 150px;
    color: #fff;
    padding: 18px 0 0px;
}
.hover_show_message .game_view_name {
  color: #fff;
}
.hover_show_message .game_contents {
  height: 100%;
  background: #F5F5F5;
}
.hover_show_message .game_contents .game_status {
  text-align: center;
  padding-top: 30px;
}
.hover_show_message .game_contents .game_status1 {
  margin-top: 30px;
}
.btn_box {
  text-align: center;
}
.game_view_play{
  width: 251px;
  margin: 8px auto 0;
  text-align: left;
}
.game_view_play span{
  display: inline-block;
}
.game_view_play .label{
  width: 70px;
  text-align: right;
}
.el-col-lg-4-8 {
  width: 20%;
}
</style>
